<template>
	<view>
		<my-navbar title="登录成功" :backIcon="false"></my-navbar>
		<view class="page-line"></view>
		<view v-if="relateStatus === 'noSchool'" class="loginSuccess-none">
			<view class="none-title">您还没有加入任何学校</view>
			<view class="none-content">您还未加入任何学校，请您联系学校管理人员添加；或 核实您登录的手机号（{{ phone }}）与学校添加的是否 一致。</view>
		</view>
		<view v-else class="loginSuccess-has">
			<view class="has-header">
				<view class="header-title">登录成功</view>
				<view class="header-subtitle">请确认基本信息，以便您更好的管理您的班级</view>
			</view>
			<view class="has-form">
				<view class="form-item">
					<view class="item-label">您的所属学校</view>
					<input class="item-value" type="text" placeholder="请输入学校" :value="i_school.data.school" placeholder-style="color: #c3c3c3;" :disabled="true" />
				</view>
				<view class="form-item">
					<view class="item-label">您的姓名</view>
					<input class="item-value" type="text" placeholder="请输入姓名" v-model="i_name.data.name" placeholder-style="color: #c3c3c3;" />
				</view>
				<view class="form-hint">注：如需修改，请联系学校管理员</view>
				<view class="form-item none-border">
					<view class="item-label">您的任教学科</view>
					<view class="item-range">
						<view
							v-for="(i, j) in i_subject.range"
							:key="j"
							class="range-item"
							:class="[i_subject.data.subject === i ? 'selected' : '']"
							@click="i_subject.clickItem(i)"
						>
							{{ i }}
						</view>
						<input
							class="range-item input"
							:class="[i_subject.other != null ? 'selected' : '']"
							type="text"
							placeholder="其他（请输入）"
							placeholder-class="item-placeholder"
							:value="i_subject.other"
							@click="i_subject.clickItem('')"
							@input="i_subject.handleInput"
						/>
					</view>
				</view>
			</view>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="loginSuccess-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view v-if="relateStatus === 'noSchool'" class="loginSuccess-button primary app-button" hover-class="hover" @click="clickLogoutButton">退出登录</view>
			<view v-else class="loginSuccess-button primary app-button" hover-class="hover" :class="[l_isPass ? '' : 'disabled']" @click="clickStartButton">开始使用</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
	</view>
</template>

<script>
import form from '@/components/my-form/my-form.js';
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			i_school: {
				data: {
					school: ''
				}
			},
			i_name: {
				data: {
					name: ''
				},
				checkData: () => {
					const context = this.i_name;
					return [
						() => {
							if (!context.data.name) return '姓名不能为空';
						}
						// 备用：匹配中文、英文、空格
						// () => {
						// 	if (!/^[A-Za-z\u4e00-\u9fa5\ ]+$/.test(context.data.name)) return '只能输入中文或英文';
						// }
					];
				}
			},
			i_subject: {
				range: ['语文', '数学', '英语', '物理', '地理', '生物', '化学', '思想政治', '历史'],
				other: null,
				data: {
					subject: ''
				},
				error: '',
				setData: data => {
					const context = this.i_subject;
					const inRange = context.range.find(i => i == data.subject);
					if (inRange) {
						context.data.subject = data.subject;
					} else {
						context.other = data.subject;
					}
				},
				checkData: () => {
					const context = this.i_subject;
					return [
						() => {
							if (!context.data.subject) return '任教学科不能为空';
						}
					];
				},
				clickItem: value => {
					const context = this.i_subject;
					context.error = '';
					context.data.subject = value;
					context.other = value === '' ? '' : null;
				},
				handleInput: e => {
					const context = this.i_subject;
					context.data.subject = e.detail.value;
					context.other = e.detail.value;
					const inRange = context.range.find(i => i == e.detail.value);
					if (inRange) this.$nextTick(() => (context.other = null));
				}
			},
			relateStatus: 'noSchool', // 关联状态：noSchool-未加入学校 noClass-已加入学校未加入班级 joinClass-已加入班级)
			phone: '' // 非家校驿和未关联学校的用户的提示信息需要使用
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		l_list() {
			return [this.i_school, this.i_name, this.i_subject];
		},
		l_isPass() {
			return form.checkListData(this.l_list).length === 0;
		}
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		// 开始使用按钮
		async clickStartButton() {
			let errors = [];
			errors = form.checkListData(this.l_list, true);
			if (errors.length) {
				let error = errors.find(i => i)[0];
				this.$showToast(error);
				return;
			}
			const listData = form.getListData(this.l_list);
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.user.set_teacher_info({
					teachSubject: listData.subject,
					name: listData.name
				});
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '设置基本信息失败');
				return;
			}
			this.updateJxyUserInfo();
			uni.hideLoading();
			if (this.relateStatus === 'noClass') {
				// 未加入班级的情况
				uni.reLaunch({
					url: '/packageA/pages/my/selectSquad?skip=1'
				});
			} else if (this.relateStatus === 'joinClass') {
				// 已加入班级的情况
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		// 退出登录
		async clickLogoutButton() {
			uni.showLoading({
				mask: true
			});
			try {
				await this.$api.user.logout();
			} catch (err) {}
			this.$store.commit('ALL_USERS_SUCCESS', { userProfile: {}, jxyUserInfo: {}, wxUserId: {} });
			uni.hideLoading();
			uni.reLaunch({
				url: '/packageA/pages/login/login'
			});
		}
	},
	async onLoad(options) {
		// 关联状态：noSchool-未加入学校 noClass-已加入学校未加入班级 joinClass-已加入班级)
		this.relateStatus = options.relateStatus || 'noClass';
		this.phone = options.phone;
		if (this.relateStatus == 'noSchool') return;
		form.setListData(this.l_list, {
			school: this.jxyUserInfo.schoolName,
			name: this.jxyUserInfo.name,
			subject: this.jxyUserInfo.teachSubject
		});
	},
	onHide() {
		if (this.relateStatus === 'noSchool') {
			this.$store.commit('ALL_USERS_SUCCESS', { userProfile: {}, jxyUserInfo: {}, wxUserId: {} });
		}
	}
};
</script>

<style lang="less" scoped>
.page-line {
	height: 2rpx;
	background-color: #eeeeee;
}

.loginSuccess-none {
	margin-top: 60rpx;
	padding: 0 30rpx;

	.none-title {
		font-size: 48rpx;
		font-weight: 500;
		color: #222222;
	}

	.none-content {
		font-size: 28rpx;
		color: #808080;
		margin-top: 30rpx;
	}

	.none-buttons {
		margin-top: 243rpx;
	}
}

.loginSuccess-has {
	padding: 0 30rpx;

	.has-header {
		margin-top: 60rpx;

		.header-title {
			font-size: 48rpx;
			font-weight: 500;
			color: #222222;
			margin-bottom: 10rpx;
		}

		.header-subtitle {
			font-size: 28rpx;
			color: #808080;
		}
	}

	.has-form {
		margin-top: 30rpx;

		.form-item {
			border-bottom: 2rpx solid #eeeeee;
			padding-top: 30rpx;
			padding-bottom: 40rpx;

			position: relative;

			&.none-border {
				border-bottom: none;
			}

			.item-label {
				font-size: 28rpx;
				color: #444444;
				padding-bottom: 10rpx;
			}

			.item-value {
				font-size: 32rpx;
				color: #222222;
			}

			.item-range {
				padding-top: 10rpx;
				display: flex;
				flex-wrap: wrap;

				.range-item {
					border-radius: 32rpx;
					border: 2rpx solid #ebecee;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
					padding: 15rpx 30rpx;

					font-size: 28rpx;
					color: #222222;

					/deep/.item-placeholder {
						color: #222222;
					}

					&.input {
						width: 222rpx;

						font-size: 28rpx;
						text-align: center;
						color: #222222;
					}

					&.selected {
						border: 2rpx solid #ff6600;

						color: #ff6600;
						font-weight: 500;

						.item-input {
							color: #ff6600;
							font-weight: 500;
						}

						/deep/.item-placeholder {
							color: transparent;
						}
					}
				}
			}
		}

		.form-hint {
			font-size: 28rpx;
			color: #999999;
			padding-top: 10rpx;
		}

		.form-buttons {
		}
	}
}

.loginSuccess-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #eeeeee;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 32rpx;
	color: #222222;

	display: flex;
	justify-content: center;
	align-items: center;

	&.primary {
		background-color: #ff6600;
		color: #ffffff;
	}
}
</style>
